<template>
  <div class="viewBox">
    <div class="view_title">
      <div class="text-16px">通知公告</div>
      <div
        class="flex items-center cursor-pointer"
        @click="gotoPage('/rsgl/other/notice')"
      >
        <el-button link type="primary"> 全部 </el-button>
        <img class="w-15px h-15px ml-2px" src="@/assets/images/00.png" alt="" />
      </div>
      <!-- <el-button link type="primary" color="rgb(0,0,0)">
        删除<el-icon><Delete /></el-icon>
      </el-button> -->
    </div>
    <div>
      <el-table
        v-loading="noticeLoading"
        :data="noticeList"
        @row-dblclick="preView"
        border
        class="cursorTable"
        header-row-class-name="textCenter"
      >
        <el-table-column
          label="公告标题"
          prop="title"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="公告状态"
          align="center"
          prop="isRead"
          width="100"
        >
          <template #default="scope">
            <dict-drop :options="is_read" :value="scope.row.isRead"></dict-drop>
          </template>
        </el-table-column>
        <el-table-column
          label="公告类型"
          align="center"
          prop="announcementType"
          width="100"
        >
          <template #default="scope">
            <dict-drop
              :options="announcement_type"
              :value="scope.row.announcementType"
            ></dict-drop>
          </template>
        </el-table-column>
        <el-table-column
          label="发布时间"
          align="center"
          prop="publishTime"
          width="180"
        >
          <template #default="scope">
            <span>{{ parseTime(scope.row.publishTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup name="Notice">
import { getCurrentInstance } from 'vue'
import { listNotice } from '@/api/system/notice'
const router = useRouter()

const { proxy } = getCurrentInstance()
const { announcement_type, is_read } = proxy.useDict(
  'announcement_type', //  --公告类型
  'is_read' // -- 是否已读
)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 8
  },
  noticeList: []
})
const { queryParams, noticeList } = toRefs(data)
const noticeLoading = ref(false)
async function init() {
  noticeLoading.value = true
  listNotice(queryParams.value).then(response => {
    noticeList.value = response.rows
    noticeLoading.value = false
  })
}
function gotoPage(path, query) {
  router.push({
    path,
    query
  })
}

function preView(row) {
  gotoPage('/rsgl/other/noticeDetails', { noticeId: row.id })
}

init()
</script>

<style scoped lang="scss">
.viewBox {
  height: 420px;
  margin-bottom: 20px;
  :deep(.el-table) {
    margin: 0 !important;
  }
  .view_title {
    background-color: rgba(249, 249, 249, 1);
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid rgba(223, 220, 220, 0.8);
    font-family: '微软雅黑 Bold';
    font-weight: 600;
  }
  :deep(.cursorTable tbody .el-table__row) {
    cursor: pointer;
  }
  :deep(.textCenter .el-table__cell) {
    text-align: center;
  }
}
</style>
